<template>
  <div class="w-full h-full flex justify-between items-center overflow-hidden bg-white">
    <div class="w-[560px] h-full m-login-left">
      <img class="w-full h-full object-top" src="@/assets/images/login.jpg" />
    </div>
    <div class="flex-1 flex h-full w-0 items-center justify-center xl:justify-start relative">
      <div class="w-[330px] mx-auto text-center login-wrap">
        <h2 class="text-[24px]">欢迎登录</h2>
        <p class="text-gray-500 mt-2">欢迎登录百利管理后台</p>
        <el-form
          class="mt-[30px]"
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          label-width="0px"
          size="large"
        >
          <el-form-item>
            <el-input
              v-model="ruleForm.username"
              placeholder="用户名"
              prefix-icon="Cellphone"
              autocomplete="new-password"
              @blur="handleBlur"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="ruleForm.password"
              type="password"
              show-password
              prefix-icon="Lock"
              autocomplete="new-password"
              placeholder="密码"
            />
          </el-form-item>
          <el-form-item class="vercode-form-item" v-if="state.authType == 1">
            <div class="flex w-full justify-between">
              <el-input
                class="!flex-1 w-0"
                v-model="ruleForm.captcha"
                placeholder="验证码"
                prefix-icon="CarSecurity"
                autocomplete="new-password"
              />
              <div class="code-btn" v-loading="state.captchaing">
                <img v-if="state.captchaImg" :src="state.captchaImg" @click="getCaptcha()" />
              </div>
            </div>
          </el-form-item>
          <el-form-item class="vercode-form-item" v-if="state.authType == 2">
            <div class="flex w-full justify-between">
              <el-input
                class="!flex-1 w-0"
                v-model="ruleForm.captcha"
                placeholder="请输入谷歌验证码"
                prefix-icon="CarSecurity"
                autocomplete="new-password"
              />
            </div>
          </el-form-item>
        </el-form>
        <div class="mt-[50px]">
          <span class="text-gray-500">登陆代表您已阅读并同意</span>
          <span class="text-primary">《使用条款》</span>
          <span class="text-primary">《隐私政策》</span>
        </div>
        <el-button
          :loading="state.loading"
          :disabled="state.loading"
          class="w-full mt-[10px]"
          size="large"
          type="primary"
          @click="login"
          >登录{{ state.loading ? "中..." : "" }}</el-button
        >
      </div>
      <div class="absolute bottom-[10px] text-center xl:left-[200px] text-gray-500">
        Copyright © 2019-2023 名称名称. All rights reserved.
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { debounce } from "lodash-es";
import { message } from "@/utils/message";
import { reqAuthType, reqCaptcha, reqLogin } from "@/api/login";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();
const router = useRouter();
const state = reactive({
  loading: false,
  captchaImg: "",
  captchaId: "",
  captchaing: false,
  authType: 1
});

const ruleForm = reactive({
  username: import.meta.env.PROD ? "" : "",
  password: import.meta.env.PROD ? "" : "",
  captcha: ""
});

const handleBlur = async () => {
  try {
    if (!ruleForm.username) {
      return;
    }
    const res = await reqAuthType({
      Name: ruleForm.username
    });
    state.authType = res.data.AuthType;
    if (state.authType == 2) {
      ruleForm.captcha = "";
    }
  } catch (error) {
    console.log(error);
  }
};

const login = debounce(async () => {
  if (!ruleForm.username) {
    return message.warning("请输入用户名");
  }
  if (!ruleForm.password) {
    return message.warning("请输入密码");
  }
  try {
    state.loading = true;
    const res = await reqLogin({
      Name: ruleForm.username,
      Password: ruleForm.password,
      ...(state.authType == 1 ? { CaptchaId: state.captchaId } : {}),
      Captcha: ruleForm.captcha
    });
    state.loading = false;
    userStore.setToken(res.data.Token);
    userStore.setChatToken(res.data.ChatToken);
    userStore.setUserInfo(res.data.UserInfo);

    message.success("登录成功");
    router.push({ path: "/" });
  } catch (error) {
    getCaptcha();
    handleBlur();
    state.loading = false;
    console.log(error);
  }
}, 500);

// 获取验证码
const getCaptcha = async () => {
  try {
    ruleForm.captcha = "";
    state.captchaing = true;
    let res = await reqCaptcha();
    state.captchaing = false;
    if (res?.code == 200) {
      state.captchaImg = res.data.CaptchaImg;
      state.captchaId = res.data.CaptchaId;
      ruleForm.captcha = import.meta.env.PROD ? "" : res.data.Answer;
    }
  } catch (error) {
    state.captchaing = false;
  }
};

onBeforeMount(() => {
  getCaptcha();
});
</script>
<style scoped lang="scss">
:deep(.el-input__icon) {
  font-size: 18px;
}
.el-form-item {
  margin-bottom: 16px;
}
.vercode-form-item {
  margin-bottom: 6px;
}
</style>
<style scoped>
.code-btn {
  @apply text-center;
  @apply h-[36px] p-0 m-0 w-[90px] ml-[10px];
  @apply cursor-pointer;
}
.code-btn img {
  @apply w-full h-full block;
}
:deep(.el-input__wrapper) {
  border-radius: 25px;
}
:deep(.el-button) {
  border-radius: 25px;
}
.login-wrap {
  background: linear-gradient(to right, rgba(255, 182, 193, 0.5), rgba(135, 206, 250, 0.5));
  padding: 30px 20px;
  border-radius: 16px;
}
</style>
